<template>
  <div class="task-plan-swapper">
    <el-card>
      <div style="text-align: right; margin-bottom: 20px">
        <el-button plain @click="exportExcel">导出</el-button>
      </div>
      <div>
        <el-table
          :data="table"
          :header-cell-style="headerCellStyle"
          style="width: 100%"
        >
          <el-table-column prop="source" label="文件名" />
          <el-table-column prop="taskName" label="来源" />
          <el-table-column prop="startDate" label="更新时间" />
          <!-- 操作列 -->
          <el-table-column
            prop="operator"
            label="操作"
            width="280"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button
                type="success"
                size="small"
                text
                @click="handleDetail(row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-swapper">
          <el-pagination
            background
            layout="sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" title="值保计划方案模板" width="800">
      <div class="modal-content">
        <div class="modal-content-title">值保计划方案模板</div>
        <div>
          蒙层使用深黑色半透明背景（rgba (0,0,0,0.85)），突出图片内容
          放大后的图片居中显示，有最大宽高限制 缩略图保留 hover 效果，提示可点击
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";

const headerMap = {
  taskName: "文件名",
  source: "来源",
  startDate: "更新时间",
  creator: "操作",
};
const dialogVisible = ref(false);
const headerCellStyle = () => {
  return {
    backgroundColor: "#f8f8f8", // 设置背景色
    fontWeight: "bold",
  };
};

const table = [
  {
    source: "AI识别",
    taskName: "田间巡查",
    startDate: "2025-08-13",
    creator: "张三",
  },
];
const pageInfo = reactive({
  total: 100,
  currentPage: 1,
  pageSize: 10,
});

function handleDetail(row: any) {
  dialogVisible.value = true;
}
function handleSizeChange() {}
function handleCurrentChange() {}

const exportExcel = () => {
  // 1. 生成中文表头行
  const headerRow = Object.values(headerMap); // 提取所有中文表头

  // 2. 生成数据行（按表头顺序提取对应字段的值）
  const dataRows = table.map((row) =>
    Object.keys(headerMap).map(
      (field: string) => row[field as keyof typeof headerMap]
    )
  );
  // 3. 合并表头和数据，生成 Excel 工作表
  const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);

  // 4. 配置工作簿并导出
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
  saveAs(
    new Blob([excelBuffer], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    }),
    "任务计划.xlsx"
  );
};
</script>

<style lang="scss" scoped>
.task-plan-swapper {
  padding: 20px;
  height: calc(100vh - 100px);
  .el-card {
    height: 100%;
  }
  .modal-content {
    padding: 16px;
    .modal-content-title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
  }
  .pagination-swapper {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
}
</style>
